<template>
  <div class="JNPF-common-layout">
    <div class="JNPF-common-layout-center">
     
      <el-row class="JNPF-common-search-box" :gutter="16" v-if="comData">
        <h3>企业信息</h3>
        <el-form >
          <el-col :span="6">
            <el-form-item label="企业名称">
              <el-input v-model="comData.companynam" placeholder="请输入" disabled> </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="企业简称">
              <el-input v-model="comData.simplenam" placeholder="请输入" disabled> </el-input>
            </el-form-item>
          </el-col>
          
          <el-col :span="6">
            <el-form-item label="企业类型">
              <el-input v-model="comData.type" placeholder="请输入" disabled> </el-input>
            </el-form-item>
          </el-col>
          
          <el-col :span="6">
            <el-form-item label="企业介绍">
              <el-input v-model="comData.introduce" placeholder="请输入" disabled> </el-input>
            </el-form-item>
          </el-col>
          
          <el-col :span="6">
            <el-form-item label="企业地址">
              <el-input v-model="comData.adress" placeholder="请输入" disabled> </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="企业联系人">
              <el-input v-model="comData.contact" placeholder="请输入" disabled> </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="联系人电话">
              <el-input v-model="comData.phone" placeholder="请输入" disabled> </el-input>
            </el-form-item>
          </el-col>          
        </el-form>
      </el-row>
     
      <el-row class="JNPF-common-search-box" :gutter="16">
        <h3 style="margin-bottom: 20px;">方案信息</h3>
        <!-- <el-form @submit.native.prevent>
          <el-col :span="6">
            <el-form-item label="接待编码">
              <el-input v-model="query.code" placeholder="请输入" clearable> </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="接待内容">
              <el-input v-model="query.content" placeholder="请输入" clearable> </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="任务类型">
              <el-select v-model="query.tasktype" placeholder="请选择" clearable>
                <el-option v-for="(item, index) in tasktypeOptions" :key="index" :label="item.fullName" :value="item.id"
                  :disabled="item.disabled"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <template v-if="showAll">
            <el-col :span="6">
              <el-form-item label="任务开始时间">
                <el-date-picker v-model="query.taskstarttime" type="datetimerange" value-format="timestamp"
                  format="yyyy-MM-dd HH:mm" start-placeholder="开始日期" end-placeholder="结束日期">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="任务结束时间">
                <el-date-picker v-model="query.taskendtime" type="datetimerange" value-format="timestamp"
                  format="yyyy-MM-dd HH:mm" start-placeholder="开始日期" end-placeholder="结束日期">
                </el-date-picker>
              </el-form-item>
            </el-col>
          </template>
          <el-col :span="6">
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" @click="search()">查询</el-button>
              <el-button icon="el-icon-refresh-right" @click="reset()">重置</el-button>
              <el-button type="text" icon="el-icon-arrow-down" @click="showAll=true" v-if="!showAll">
                展开
              </el-button>
              <el-button type="text" icon="el-icon-arrow-up" @click="showAll=false" v-else>
                收起
              </el-button>
            </el-form-item>
          </el-col>
        </el-form> -->
      </el-row>
      <div class="JNPF-common-layout-main JNPF-flex-main">
        <!-- <div class="JNPF-common-head">
          <div class="JNPF-common-head-right">
            <el-tooltip effect="dark" content="刷新" placement="top">
              <el-link icon="icon-ym icon-ym-Refresh JNPF-common-head-icon" :underline="false" @click="reset()" />
            </el-tooltip>
            <screenfull isContainer />
          </div>
        </div> -->
        <JNPF-table v-loading="listLoading" :data="list" @sort-change='sortChange' style="min-height: 200px;">
          <el-table-column prop="code" label="接待编码" width="0" align="left" />
          <el-table-column prop="content" label="接待内容" width="0" align="left" />
          <el-table-column label="任务类型" width="0" prop="tasktype" algin="left">
            <template slot-scope="scope">
              {{ scope.row.tasktype | dynamicText(tasktypeOptions) }}
            </template>
          </el-table-column>
          <el-table-column prop="taskstarttime" label="任务开始时间" width="0" align="left" />
          <el-table-column prop="taskendtime" label="任务结束时间" width="0" align="left" />
          <el-table-column prop="headphone" label="负责人联系电话" width="0" align="left" />
          <el-table-column prop="isphoto" label="是否照相" width="0" align="left" />
          <el-table-column prop="isrecord" label="是否录像" width="0" align="left" />
          <el-table-column label="操作" fixed="right" width="300">
            <template slot-scope="scope">
              <el-button type="text" :disabled="[1,2,4,5].indexOf(scope.row.flowState)>-1"
                @click="addOrUpdateHandle(scope.row.id)">方案详情
              </el-button>
              <el-button type="text" v-if="scope.row.tasktype=='424298780968361925'"
                :disabled="[1,2,4,5].indexOf(scope.row.flowState)>-1"
                @click="clickBtn(scope.row,'jzVisible','busreceiveplanjiezhan')">接站详情
              </el-button>
              <el-button type="text" v-if="scope.row.tasktype=='424298931397074885'"
                :disabled="[1,2,4,5].indexOf(scope.row.flowState)>-1"
                @click="clickBtn(scope.row,'hyVisible','busmeetingroombook')">会议详情
              </el-button>
              <el-button type="text" v-if="scope.row.tasktype=='424298849310351301'"
                :disabled="[1,2,4,5].indexOf(scope.row.flowState)>-1"
                @click="clickBtn(scope.row,'cgVisible','busvisitspot')">参观详情
              </el-button>
            </template>
          </el-table-column>
        </JNPF-table>
        <pagination :total="total" :page.sync="listQuery.currentPage" :limit.sync="listQuery.pageSize"
          @pagination="initData" />
      </div>
    </div>
    <!-- <FlowBox v-if="flowVisible" ref="FlowBox" @close="colseFlow" /> -->
    <el-dialog title="方案详情" :close-on-click-modal="false" :close-on-press-escape="false" :visible.sync="formVisible"
      lock-scroll class="JNPF-dialog JNPF-dialog_center" width="50%" append-to-body>
      <template v-if="formVisible">
        <formInfo ref="formInfo" @refresh="refresh" />
      </template>
    </el-dialog>
    <el-dialog title="接站详情" :close-on-click-modal="false" :close-on-press-escape="false" :visible.sync="jzVisible"
      lock-scroll class="JNPF-dialog JNPF-dialog_center" width="50%" append-to-body>
      <template v-if="jzVisible">
        <busreceiveplanjiezhan ref="busreceiveplanjiezhan" @refresh="refresh" />
      </template>
    </el-dialog>
    <el-dialog title="会议详情" :close-on-click-modal="false" :close-on-press-escape="false" :visible.sync="hyVisible"
      lock-scroll class="JNPF-dialog JNPF-dialog_center" width="50%" append-to-body>
      <template v-if="hyVisible">
        <busmeetingroombook ref="busmeetingroombook" @refresh="refresh" />
      </template>
    </el-dialog>
    <el-dialog title="参观详情" :close-on-click-modal="false" :close-on-press-escape="false" :visible.sync="cgVisible"
      lock-scroll class="JNPF-dialog JNPF-dialog_center" width="50%" append-to-body>
      <template v-if="cgVisible">
        <busvisitspot ref="busvisitspot" @refresh="refresh" />
      </template>
    </el-dialog>

    <ExportBox v-if="exportBoxVisible" ref="ExportBox" @download="download" />
  </div>
</template>

<script>
  import request from '@/utils/request'
  import {
    getDictionaryDataSelector
  } from '@/api/systemData/dictionary'
  import FlowBox from '@/views/workFlow/components/FlowBox'
  import ExportBox from './ExportBox'
  import formInfo from '@/views/buscompany/busreceiverplanmain/form'
  import busreceiveplanjiezhan from '@/views/buscompany/busreceiverplanmain/busreceiveplanjiezhan/index.vue'
  import busmeetingroombook from '@/views/buscompany/busreceiverplanmain/busmeetingroombook/index.vue'
  import busvisitspot from '@/views/buscompany/busreceiverplanmain/busvisitspot/index.vue'
  import {
    getDataInterfaceRes
  } from '@/api/systemData/dataInterface'

  export default {
    components: {
      FlowBox,
      ExportBox,
      formInfo,
      busreceiveplanjiezhan,
      busvisitspot,
      busmeetingroombook
    },
    data() {
      return {
        showAll: false,
        query: {
          code: undefined,
          content: undefined,
          tasktype: undefined,
          taskstarttime: undefined,
          taskendtime: undefined,
        },
        treeProps: {
          children: 'children',
          label: 'fullName',
          value: 'id'
        },
        comData:null,
        list: [],
        listLoading: true,
        total: 0,
        listQuery: {
          currentPage: 1,
          pageSize: 20,
          sort: "desc",
          sidx: "",
        },
        jzVisible: false,
        hyVisible: false,
        cgVisible: false,
        flowVisible: false,
        formVisible: false,
        exportBoxVisible: false,
        columnList: [{
            prop: 'code',
            label: '接待编码'
          },
          {
            prop: 'content',
            label: '接待内容'
          },
          {
            prop: 'tasktype',
            label: '任务类型'
          },
          {
            prop: 'taskstarttime',
            label: '任务开始时间'
          },
          {
            prop: 'taskendtime',
            label: '任务结束时间'
          },
          {
            prop: 'headphone',
            label: '负责人联系电话'
          },
          {
            prop: 'isphoto',
            label: '是否照相'
          },
          {
            prop: 'isrecord',
            label: '是否录像'
          },
        ],
        tasktypeOptions: [{
          "fullName": "选项一",
          "id": "1"
        }, {
          "fullName": "选项二",
          "id": "2"
        }],
        tasktypeProps: {
          "label": "fullName",
          "value": "id"
        },
      }
    },
    computed: {
      menuId() {
        return this.$route.meta.modelId || ''
      }
    },
    created() {
      this.getTask()
    },
    methods: {
      getTask() {
        request({
          url: '/api/system/DictionaryData/424298617168207813',
          method: 'get',
        }).then((res) => {
          this.tasktypeOptions = res.data.list;
        })
      },
      sortChange({
        column,
        prop,
        order
      }) {
        this.listQuery.sort = order == 'ascending' ? 'asc' : 'desc'
        this.listQuery.sidx = !order ? '' : prop
        this.initData()
      },
      initData() {
        this.listLoading = true;
        let _query = {
          ...this.listQuery,
          ...this.query,
          menuId: this.menuId,
          companyid: this.pageObj.id
        };
        // 获取方案列表
        request({
          url: `/api/example/BusReceiverPlanMain/getList`,
          method: 'post',
          data: _query
        }).then(res => {
          var _list = [];
          for (let i = 0; i < res.data.list.length; i++) {
            let _data = res.data.list[i];
            _list.push(_data)
          }
          this.list = _list
          this.total = res.data.pagination.total

          this.listLoading = false
          this.$emit('setPageLoad')
        })
        // 根据企业id获取企业详情信息
        request({
          url: '/api/example/BusCompany/' + this.pageObj.id,
          method: 'get'
        }).then(res => {
          this.comData=res.data
        });
      },
      init(row) {
        this.pageObj = row;
        this.initData()
      },
      addOrUpdateHandle(id, flowState) {
        let data = {
          id: id || '',
          enCode: 'busReceivePlan',
          flowId: '421036395256094149',
          formType: 1,
          opType: flowState ? 0 : '-1',
          status: flowState
        }
        this.flowVisible = true
        this.formVisible = true
        this.$nextTick(() => {
          // this.$refs.FlowBox.init(data)
          this.$refs.formInfo.init(this.pageObj, id, 'detail')
        })
      },
      clickBtn(row, type, ref) {
        this[type] = true;
        this.$nextTick(() => {
          this.$refs[ref].init(row, 'detail')
        })
      },
      exportData() {
        this.exportBoxVisible = true
        this.$nextTick(() => {
          this.$refs.ExportBox.init(this.columnList)
        })
      },
      download(data) {
        let query = {
          ...data,
          ...this.listQuery,
          ...this.query,
          menuId: this.menuId
        }
        request({
          url: `/api/example/BusReceiverPlanMain/Actions/Export`,
          method: 'GET',
          data: query
        }).then(res => {
          if (!res.data.url) return
          this.jnpf.downloadFile(res.data.url)
          this.$refs.ExportBox.visible = false
          this.exportBoxVisible = false
        })
      },
      search() {
        this.listQuery = {
          currentPage: 1,
          pageSize: 20,
          sort: "desc",
          sidx: "",
        }
        this.initData()
      },
      colseFlow(isrRefresh) {
        this.flowVisible = false
        if (isrRefresh) this.reset()
      },
      refresh(isrRefresh) {
        this.formVisible = false;
        this.jzVisible = false;
        this.hyVisible = false;
        this.cgVisible = false;
        if (isrRefresh) this.reset()
      },
      reset() {
        for (let key in this.query) {
          this.query[key] = undefined
        }
        this.listQuery = {
          currentPage: 1,
          pageSize: 20,
          sort: "desc",
          sidx: "",
        }
        this.initData()
      }
    }
  }

</script>
